<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns="http://www.w3.org/1999/xhtml"
>
<head>
    <title>Hello World!</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h1 th:inline="text">Hello.v.2.1</h1>
<p th:text="${hello}"></p>
<p th:text="${other}"></p>
<p th:text="${list.get(0)}"></p>
<div id="app">
    {{ message }}
</div>
<div id="app-2">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>

<div id="app-3">
    <p v-if="seen"> seen 为 true 的时候 你可以看到我</p>
</div>

<div id="app-4">
    <li v-for="t in todos">
        {{t.text}}
    </li>
</div>

<div id="app-5">
    <p>{{message}}</p>
    <button v-on:click="OnClick">逆转消息</button>
</div>

<div id="app-6">
    <p>input框值：{{message}}</p>
    <input v-model="message">
</div>

<ol id="app-7">
    <!-- 创建一个 todo-item 组件的实例 -->
    <todo-item></todo-item>
</ol>

<ol id="app-item">
    <a-item
            v-for="item in testlist"
            v-bind:todo="item"
            v-bind:key="item.id">
    </a-item>
</ol>


<script src="/js/vueDemon.js"></script>
</body>
</html>